<template>
  <div id="appointment-chart" style="width: 100%; height: 300px;"></div>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue';
import * as echarts from 'echarts';
import {bookingTimesService} from "@/api/analysis.js";

// 示例预约数据
const appointments = ref([
  { dateTime: '2024-11-01T10:00:00', otherProperty: 'example1' },
  { dateTime: '2024-11-02T11:00:00', otherProperty: 'example2' },
  { dateTime: '2024-11-03T12:00:00', otherProperty: 'example3' },
  { dateTime: '2024-11-04T13:00:00', otherProperty: 'example4' },
  { dateTime: '2024-11-05T14:00:00', otherProperty: 'example5' },
  { dateTime: '2024-11-06T15:00:00', otherProperty: 'example6' },
  { dateTime: '2024-11-07T16:00:00', otherProperty: 'example7' },
  { dateTime: '2024-11-08T17:00:00', otherProperty: 'example8' },
  { dateTime: '2024-11-09T18:00:00', otherProperty: 'example9' },
  { dateTime: '2024-11-10T19:00:00', otherProperty: 'example10' },
  { dateTime: '2024-11-11T20:00:00', otherProperty: 'example11' },
  { dateTime: '2024-11-18T11:00:00', otherProperty: '1' },
  { dateTime: '2024-11-18T11:00:00', otherProperty: '2' },
  { dateTime: '2024-11-18T11:00:00', otherProperty: '3' },
  { dateTime: '2024-11-18T11:00:00', otherProperty: '4' },
  { dateTime: '2024-11-18T11:00:00', otherProperty: '4' },
  { dateTime: '2024-11-18T11:00:00', otherProperty: '5' },
  { dateTime: '2024-11-18T11:00:00', otherProperty: '6' },
  { dateTime: '2024-11-18T11:00:00', otherProperty: '7' },
  { dateTime: '2024-11-18T11:00:00', otherProperty: '8' },
  { dateTime: '2024-11-18T11:00:00', otherProperty: '9' },
]);

// 计算指定天数内的预约次数
const getCounts = (data: any[], days: number): number => {
  const now = new Date();
  let count = 0;

  data.forEach((appointment) => {
    const appointmentDate = new Date(appointment.dateTime);
    const diffDays = Math.floor((now.getTime() - appointmentDate.getTime()) / (1000 * 3600 * 24));

    // 判断是否在指定天数范围内
    if (diffDays >= 0 && diffDays < days) {
      count += 1;
    }
  });

  return count;
};

// 获取当天的预约次数
const getTodayCount = (data: any[]): number => {
  const now = new Date();
  const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate());
  const todayEnd = new Date(todayStart.getTime() + 24 * 60 * 60 * 1000); // 明天开始

  return data.filter(appointment => {
    const appointmentDate = new Date(appointment.dateTime);
    return appointmentDate >= todayStart && appointmentDate < todayEnd;
  }).length;
};



onMounted(async () => {
  //获取所有数据
  const res=await bookingTimesService()
  if (res.code===200){
    appointments.value=res.data
    console.log(appointments.value)

    const weekCount = getCounts(appointments.value, 7);
    const monthCount = getCounts(appointments.value, 30);
    const todayCount = getTodayCount(appointments.value);
    const halfYearCount = getCounts(appointments.value, 180); // 最近六个月

    const chartElement = document.getElementById('appointment-chart');
    const myChart = echarts.init(chartElement!); // 确保类型安全

    const option = {
      title: {
        text: '预约统计',
        subtext: '最近一周、一个月、一天和六个月的预约次数对比',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
      },
      series: [
        {
          name: '预约次数',
          type: 'pie',
          radius: '50%',
          data: [
            { value: todayCount, name: '今天', itemStyle: { color: '#ff6384' } }, // 红色
            { value: weekCount, name: '最近一周', itemStyle: { color: '#36a2eb' } }, // 蓝色
            { value: monthCount, name: '最近一个月', itemStyle: { color: '#ffce56' } }, // 黄色
            { value: halfYearCount, name: '最近六个月', itemStyle: { color: '#4bc0c0' } }, // 青色
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };

    // 使用指定的配置项和数据显示图表
    myChart.setOption(option);
  }




});
</script>

<style scoped>
/* 可根据需要添加样式 */
</style>
